<!doctype html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>Ajax</title>
  <style>
    body {
      background: #eee;
    }

    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .content {
      width: 500px;
      margin: 90px auto 0;
      height: 500px;
    }

    .suggest {
      display: none;
    }

    .search-re li {
      padding: 8px;
    }

    .search-re {
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
<div class="content">
  <h2>日常检索</h2>
  <input type="search" id="search-input" class="search" value=""/>
  <div class="suggest">
    <ul class="search-re">
      <li>132132</li>
      <li>1dffdf</li>
    </ul>
  </div>

  <input type="search" class="search" value=""/>
  <div class="suggest">
    <ul class="search-re">
      <li>132132</li>
      <li>1dffdf</li>
    </ul>
  </div>
</div>



<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  //搜索
  'use strict';

  var target;
  $('.search').on('keyup', function (e) {
    var searchText = $(this).val();
	  target = e.target;
    var callback = function (data) {
      var d = data.AS.Results[0].Suggests;
      var html = "";
      for (var i = 0; i < d.length; i++) {
        html += '<li>' + d[i].Txt + '</li>';
      }
	    $(target).next().find('.search-re').html(html);
	    $(target).next().show();
    };

    $.ajax({
      type: "get",
      async: false,
      url: "http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=" + searchText,
      dataType: "jsonp",
      jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
      jsonpCallback: "callback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
      success: function (data) {
        callback(data);
      },
      error: function (data) {
        console.log(data);
      }
    });

  });

  $(document).bind('click', function () {
    $('.suggest').hide();
  });
  $('.suggest').delegate('li', 'click', function () {
	  $(target).val($(this).text());
  });


	// 加载其他页面的静态数据
  $.ajax( {
	  url: url, //这里是静态页的地址
	  type: "GET", //静态页用get方法，否则服务器会抛出405错误
	  success: function(data){
		  var result = $(data).find("另一个html页面的指定的一部分");
		  $("本页面div").html(result);
	  }
  });


  // 教程手写Ajax 或 jsonP
  // http://ghmagical.com/article/page/id/AASiankfBJWp
</script>
</body>
</html>